<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/home.css">
</head>
<body>
    <div class="home">
        <!-- 首页头部 -->
        <div class="header">
            <div class="header_top">
                <p>全国服务热线：400-000-0000</p>
                <div>
                    <a href="#">加入收藏</a>
                    <a href="#">设为首页</a>
                </div>
            </div>
            <div class="header_bottom">
                <div class="header_left">
                    <img src="img/logo.png" alt="">
                    <p>TK科技有限公司</p>
                    <p>cer dcd keo Holdings Co., Ltd.</p>
                </div>
                <div class="header_right">
                    <ul>
                        <li><div><a href="index.html">首页<br>Home</a></div></li>
                        <li><div><a href="detailed.html">关于我们<br>About</a></div></li>
                        <li><div><a href="product.html">产品中心<br>Products</a></div></li>
                        <li><div><a href="#">服务支持<br>Service</a></div></li>
                        <li><div><a href="#">新闻中心<br>News</a></div></li>
                        <li><div><a href="#">在线商店<br>Shop</a></div></li>
                        <li><div><a href="#">联系我们<br>Contact Us</a></div></li>
                    </ul>
                </div><div></div>
            </div>
        </div>

        <!-- 首页中部内容 -->
        <div class="content">
            <!-- 第一部分 -->
            <div class="lunbo">
                <ol>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <!-- 第二部分 -->
            <div class="introduce">
                <div class="box_all">
                    <div class="box_c box_left">
                        <div class="box_t left_top">
                            <div><img src="img/box_icon1.png" alt=""></div>
                            <p>新闻中心</p>
                            <p>NEWS.CENTER</p>
                            <img src="img/line.png" alt="">
                        </div>
                        <div class="left_bottom">
                            <div class="tr"><img src="img/bluetr.png"></div>
                            <div class="left_up">
                                <p>CeBIT 2015</p>
                                <div class="clearfix">
                                    <img src="img/box1.png" alt="">
                                    <p>创新ICT共建全联接世界德国汉诺威展览中心</p>
                                    <p>3月16日-20日</p>
                                </div>
                            </div>
                            <div class="left_down">
                                <ul>
                                    <li><a href="#"><img src="img/dot.png" alt=""> 上海国际智能建筑展览会</a></li>
                                    <li><a href="#"><img src="img/dot.png" alt=""> 2014德国柏林国际消费类电子产品展览会</a></li>
                                    <li><a href="#"><img src="img/dot.png" alt=""> 2014中国（贵阳）公告安全防范产品博览会</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="box_c box_mid">
                        <div class="box_t mid_top">
                            <div><img src="img/box_icon2.png" alt=""></div>
                            <p>新品发布</p>
                            <p>NEWS.PRODUCTS</p>
                            <img src="img/line.png" alt="">
                        </div>
                        <div class="mid_bottom">
                            <div class="tr"><img src="img/greentr.png"></div>
                            <div>
                                <div class="mid_up">
                                    <img src="img/prev.png" alt="">
                                    <img src="img/box2.png" alt="">
                                    <img src="img/next.png" alt="">
                                </div>
                                <div class="mid_down">
                                    <p>s6213w-y</p>
                                    <p>海思3518E方案，多码流技术，百万高清</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box_c box_right">
                        <div class="box_t right_top">
                            <div><img src="img/box_icon3.png" alt=""></div>
                            <p>品牌介绍</p>
                            <p>INFORMATION</p>
                            <img src="img/line.png" alt="">
                        </div>
                        <div class="right_bottom">
                            <div class="tr"><img src="img/purpletr.png"></div>
                            <div class="right_up">
                                <img src="img/box3.png" alt="">
                            </div>
                            <div class="right_down">
                                <p>"siepem"品牌是广州市TK科技有限公司推出的自有品牌</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aboutUs">
                    <h3>关于我们</h3>
                    <p>STORE DISPLAY</p>
                </div>
            </div>
            <!-- 第三部分 -->
            <div class="about">
                <div class="about_up">
                    <p>广州市TK科技有限公司是领先的监控产品供应商和解决方案服务商，面向全球提供领先的网络视频监控系列产品及专业的行业解决方案。 </p>
                    <p>TK公司自创立以来, 一直持续加大研发投入和不断致力于技术创新。现拥一批技术尖端的研发团队，创造安防行业众多高品质、高性价比的精品持续为客户创造最大价值。 </p>
                    <div class="lunbo_photo" id="lunbo_photo">
                        <div class="slider" id="slider">
                            <ul id="ul">
                                <li><img src="img/photo1.png" alt=""></li>
                                <li><img src="img/photo2.png" alt=""></li>
                                <li><img src="img/photo3.png" alt=""></li>
                                <li><img src="img/photo4.png" alt=""></li>
                                <li><img src="img/photo5.png" alt=""></li>
                                <li><img src="img/photo1.png" alt=""></li>
                                <li><img src="img/photo2.png" alt=""></li>
                                <li><img src="img/photo3.png" alt=""></li>
                                <li><img src="img/photo4.png" alt=""></li>
                                <li><img src="img/photo5.png" alt=""></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="about_down">
                    <div class="contactUs">
                        <h3>联系我们</h3>
                        <p>STORE DISPLAY</p>
                    </div>
                </div>
            </div>
            <!-- 第四部分 -->
            <div class="contact">
                <div>
                    <div class="c_left">
                        <div class="code">
                            <img src="img/code.png" alt="">
                            <p>微信扫一扫</p>
                            <p>关注我们相关的信息</p>
                        </div>
                        <div class="code_right">
                            <ul>
                                <li><img src="img/c_icon1.png" alt="">服务热线：400-000-0000</li>
                                <li><img src="img/c_icon2.png" alt="">联  系  人：某先生</li>
                                <li><img src="img/c_icon3.png" alt="">公司邮箱：www.tk.com</li>
                                <li><img src="img/c_icon4.png" alt="">公司传真：000-12345678</li>
                                <li><img src="img/c_icon5.png" alt="">邮政编码：467000</li>
                                <li><img src="img/c_icon6.png" alt="">公司地址：广州市某某区某某路某号</li>
                            </ul>
                        </div>
                        <div class="map" id="container"></div>
                    </div>
                    <div class="c_right">
                        <p>昵称</p>
                        <input type="text" name="name" id="name">
                        <p>联系电话</p>
                        <input type="text" name="phone" id="phone">
                        <p>电子邮箱</p>
                        <input type="text" name="e-mail" id="e-mail">
                        <p>内容</p>
                        <input type="text" name="text" id="text">
                        <button type="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 首页底部内容 -->
        <div class="footer">
            <div class="footer_top">
                <div class="footer_link">
                    <div>
                        <span>关注我们 ：</span>
                        <a href="#"><img src="img/qq.png" alt=""></a>
                        <a href="#"><img src="img/weixin.png" alt=""></a>
                    </div>
                    <p>
                        <a href="#">网站首页</a>·<a href="#">新闻动态</a>·<a href="#">关于我们</a>·<a href="#">团队风采</a>·<a href="#">联系我们</a>·<a href="#">在线留言</a>
                    </p>
                </div>
            </div>
            <div class="footer_bottom">
                <p> ©2015 TK科技有限公司  版权所有沪ICP证13022560号-7 All Rights Reserved</p>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=fa9d8f68eb2035855692811517b571d9"></script>
    <script src="js/myFunc.js"></script>
    <script>
        window.onload = function () {
            // 地图定位
            var map = new AMap.Map('container',{
                resizeEnable: true,
                zoom: 16,
                center: [113.320775,23.126137]
            });
            var marker = new AMap.Marker({
                position: [113.320775,23.126137],//marker所在的位置
                map:map//创建时直接赋予map属性
            });
            //也可以在创建完成后通过setMap方法执行地图对象
            marker.setMap(map);

            // about区域轮播图
            var lis = $("ul").children;
            var currentIndex = 0;

            var timer = setInterval(autoPlay, 1022);
            // 清除和设置定时器
            $("lunbo_photo").onmouseover = function () {
                clearInterval(timer);
            };
            $("lunbo_photo").onmouseout = function () {
                timer = setInterval(autoPlay, 1022);
            };

            function autoPlay() {
                // ul滚起来
                currentIndex++;
                if (currentIndex > lis.length) {
                    $("ul").style.left = 0;
                    currentIndex = 1;
                }
                constant($("ul"), -currentIndex * 300, 3);
            }
        };
    </script>
</body>
</html>